<template>
    <div id="app" class="findPage" style="height: 100%;">
        <div id="header-normal" class="header-top">
            <div class="center" style="margin-left: .79rem;width: 100%;font-size: .34rem;">
                <span  class="small-title" v-if="user.on_line==2" @click="setStatus(1)">隐身</span>
                <span  class="small-title" v-else @click="setStatus(2)">在线</span>
                <img src="../../../assets/img/triangle_icon.png" alt="三角形" style="width: .08rem;height: .08rem;">
            </div>
            <div class="text-right" style="margin-right: .34rem;" @click="operaBox(true)">
              <img src="../../../assets/img/search_icon.png" style="width: .3rem;height:.32rem;vertical-align: -.09rem;">
            </div>
        </div>
        <loading v-show="loading"></loading>
        <div v-show="!loading">
          <mt-loadmore :top-method="loadTop" :autoFill="autoFill" @top-status-change="handleTopChange" v-if="userList" class="list paddingTop backf4" ref="loadmore" :style="style" :maxDistance="maxDistance">
              <div slot="top" class="mint-loadmore-top">
                  <span v-show="topStatus !== 'loading'"><img class="loading-gif" src="../../../assets/img/loading.gif"/></span>
                  <span v-show="topStatus === 'loading'">刷新成功</span>
              </div>
              <div class="relative loadmore" v-infinite-scroll="loadMore"  infinite-scroll-disabled="loadingMore" infinite-scroll-distance="10" infinite-scroll-immediate-check="true"> 
                  <div class="find_status center">全部</div>
                  <div class="group">
                      <div class="onlineUser center" v-for="(item,index) in userList" :key="index">
                          <div class="relative online-user" :class="item.level_id>item.discover_level?'online-user-light':'online-user-gray'">
                              <div  @click.stop="enterHomePage(item.id)" style="width: 100%;height: 100%;">
                                  <img  class="online-head" v-if="item.head" :src="item.head" @error="errorimg(index)" />
                                  <img  class="online-head" v-else src="../../../assets/img/default_head.png" />
                                  <img  class="vip-level absolute" v-if="item.level_id>0" :src="require('../../../assets/img/vip_icon'+item.level_id+'.png')" />
                                  <!-- v-if="item.is_new" v-if="item.reg_day<=1"-->
                                  <div class="new_tag absolute"  v-if="item.is_new" style="width:.38rem;height: .73rem;">
                                      <img src="../../../assets/img/new_icon.png" style="width:100%;height:100%;">
                                  </div>
                              </div>
                              <!-- <aplayer v-if="item.voice" class="voice_tag" style="position: absolute!important;margin: .05rem!important;box-shadow: none!important;" :music="{src: item.voice}" mode="order">
                              </aplayer> -->
                              <div class="voice_tag absolute" v-if="item.voice"></div>
                          </div>
                          <div class="flex" style="margin-top: .32rem;">
                              <div class="user_nickname moreDot" v-text="item.nickname"></div>
                              <img v-if="item.sex==2" src="../../../assets/img/sex-female.png" class="sex-btn"/>
                              <img v-else src="../../../assets/img/sex-male.png" class="sex-btn"/>
                          </div>
                          <div class="flex" style="margin-top: .1rem;">
                            <span class="city-text" v-text="item.city?item.city:'火星'"></span><span class="city-text" v-text="item.last_login_time"></span>
                          </div>
                      </div>
                  </div>
                  <p v-show="loadingMore && !isAll" class="page-infinite-loading">
                    <mt-spinner type="fading-circle"></mt-spinner>
                  </p>
                  <p v-show="loadingMore && isAll" class="page-infinite-loading" style="font-size: .22rem;color:#8e94b7; width: 100%;">没有更多数据了</p>
              </div>
              <div v-if="userList.length == 0">
                <div class="flex" style="padding-top: 1rem;background: #fff;">
                      <img src="../../../assets/img/no-data.png" alt="点击屏幕，重新加载~" class="no-data"/>
                  </div>
                  <div class="default-text center" style="background: #fff;">暂时没有数据</div>
              </div>
          </mt-loadmore>
          <div v-if="isSearch">
            <div class="popup z-fixed">
                <div class="bg" @click="operaBox(false)"></div>
                <div class="searchBox">
                  <div class="relative">
                      <div class="bar">
                        <span class="search-title">筛选</span>
                        <img src="../../../assets/img/close_icon.png" class="close_icon absolute" @click="operaBox(false)" />
                      </div>
                      <div class="search-controller">
                          <p class="search-title-name">性别</p>
                          <div class="sex-radio flex">
                             <div class="item center" :class="{'active':sex==0}" @click="selectSex(0)">全部</div>
                             <div class="item center" :class="{'active':sex==1}" @click="selectSex(1)">男</div>
                             <div class="item center" :class="{'active':sex==2}" @click="selectSex(2)">女</div>
                          </div>
                      </div>
                      <div class="flex center" style="border-top:2px solid rgba(244,244,244,1);margin-top:.45rem;padding-top: .41rem;">
                        <div class="btn btn-cancel" @click="operaBox(false)">取消</div>
                        <div class="btn btn-sure" @click="searchUser(sex)">确定</div>
                      </div>
                  </div>
              </div>
            </div>
          </div>
        <div class="backTop" v-if="isBack" @click="backTop"></div>
        </div>
          
      </div>
    </div>
</template>
<script>
import './index.css';
import common from 'assets/js/common';
import { Loadmore,Spinner,InfiniteScroll } from 'mint-ui';
import Loading from "components/loading.vue"
/*import Aplayer from 'vue-aplayer'*/
export default {  
  data(){
    return {
        topStatus:'',
        autoFill:false,
        page:1,
        row:12,
        userList:[],
        loadingMore:false,
        isAll:false, //是否全部加载完
        user:{},
        type:1, //1在线 2隐身
        sex:0,
        isSearch:false,
        loading:true,
        platform:'h5',
        isBack:false,
        t:'',
        maxDistance:100,
        mini:true,
        time:0,
        style:{
          width:'7.5rem'
        },
        h:0,
        el:null,
        startY:''
    }
  },
  //,Aplayer 
  components:{ Loadmore,Spinner,InfiniteScroll,Loading}, 
  mounted:function(){ 
      this.platform = common.platform;
      this.getOnlineUser(1);
      //进入个人主页
      window["enterHomePage"] = (uid)=>{
        if(this.topStatus === "pull" ){
            //alert("进入个人主页");
            if(this.platform == 'ios'){
                enterHomePage(uid);
            }else if(this.platform == 'android'){
                window.user.goingHomePage(uid);
            }
        }
      }
      //点击大区域也可以播放暂停
      /*$(".aplayer-pic").on("click",function(){
        $(".aplayer-button").click();
      })*/
  },
  destroyed:function(){
     this.stopAudio();
  },
  methods: {
      /**
       * 绑定touch事件
       */
      bindTouchEvent(){
        let _this = this;
        this.el.addEventListener('touchstart', _this._touchStart);
        this.el.addEventListener('touchmove', _this._touchMove);
      },
      /**
       * 开始下拉的监听 这里主要是记录下初始坐标 下拉只需记录y即可(这里方便以后测其他的使用,也记录了 x)
       * @param e 下拉事件
       */
      _touchStart(e){
        let touch = e.changedTouches[0];
        this.startY = touch.clientY;
      },
      /**
       * 下拉过程的监听 这里记录下移动的距离
       * @param e
       */
      _touchMove(e){
        let _this = this;
        let touch = e.changedTouches[0];
        //获取下拉的距离
        let _move = touch.clientY - _this.startY;
        //这里主要是让内容区随着下拉操作而往下滚动
        //_move>0是指往下滑动(下拉),_move<100是给一个上限,不然一直下拉的话整个内容区就会随着下拉距离一直增大,用户体验不是很好
        //这里下拉操作主要是显示出顶上的一层tipText
        //解决下拉到app底部不执行刷新问题
        //alert(_move+"====="+(parseInt($(".list").height())/4)*3);
        //位置大于列表的3/4高度的时候去查询一下 避免到app底部会不刷x
        if (parseInt(_move) == parseInt(parseInt($(".list").height())/4*3)) {
            console.log("查询");
            this.loadTop();
        }
      },
      stopAudio:function(){
          /*let audio =document.querySelectorAll('audio');
          if(audio){
              var audioLen = audio.length;
              for (var i = 0; i<audioLen; i++) {
                if(!audio[i].paused){
                        audio[i].pause();// 这个就是暂停
                }
              }
          }*/
      },
      handleTopChange:function(status) {
        this.topStatus = status;
      },
      operaBox:function(bool){
        this.isSearch = bool;
      },
      setStatus:function(status){
        this.type = status;
        this.setUserStatus();
      },
      //设置状态
      setUserStatus:function(){
          common.ajax({
              url:'api/user/setOnline',
              data:{
                type:this.type
              }
          }).then(res=>{
             this.userNumber = res.data;
             this.getUserInfo();
             //重新查第一页
             this.page = 1;
             this.time = 0;
             this.getOnlineUser();
          })
      },
      // 下拉刷新数据
      loadTop() {
          //alert("下拉方法");
          setTimeout(() => {
            //alert("查询第一页");
            this.page = 1;
            this.time = 0;
            this.getOnlineUser();
            this.getUserInfo();
            this.isBack = false;
            this.$refs.loadmore.onTopLoaded();
          }, 100);
      },
      backTop(){
        this.isBack = false;
        $('.list').animate({scrollTop: '0px'});
      },
      loadMore(){
          this.time = this.userList[this.userList.length-1].login_time;
          //显示加载中动画 
          this.loadingMore = true;
          this.page = this.page+1;
          setTimeout(() => {
            if(!this.isAll){
              this.getOnlineUser();
              this.isBack = true;
            }
          },100)
      },
      errorimg:function(index){
          this.userList[index].head = require("assets/img/default_head.png");
      },
      selectSex:function(sex){
        this.sex = sex;
      },
      searchUser:function(sex){
        this.page = 1;
        this.time = 0;
        this.getOnlineUser();
        let val = "全部";
        if(sex==0){
            val= "全部";
        }else if(sex==1){
            val= "男";
        }else if(sex==2){
            val= "女";
        }
        $(".find_status").text(val);
        this.operaBox(false);
      },
      //获取在线用户列表
      getOnlineUser:function(num){
          common.ajax({
              type:'GET',
              url:'api/user/discover/list',
              data:{
                 p:this.page,
                 row:this.row,
                 sex:this.sex,
                 time:this.time
              }
          }).then(res=>{
             this.loading = false;
             let respose = res.data;
             if(this.page == 1 ){
                this.userList = respose;
              }else{
                this.userList = [...this.userList,...respose];
              }
              //隐藏动画
              this.loadingMore = false;
              if(respose.length < this.row){
                  this.isAll = true;
              }else{
                this.isAll = false;
              }
              if(num == 1){
                var height = window.innerHeight;
                this.h = height;
                var headerHeight = $("#header-title").height();
                this.style = {
                   'width':'7.5rem',
                   'height':height+"px"
                }
                this.getUserInfo();
              }
             this.el = document.querySelector(".list");
             this.bindTouchEvent();
          })
      },
      getUserInfo:function(){
          common.ajax({
              type:'get',
              url:'api/user/info'
          }).then(res=>{
             this.loading = false;
             this.user = res.data;
          })
      },
      enterHomePage:function(uid){
        this.stopAudio();
        window.enterHomePage(uid);
      }
  }
} 
</script>

